import { ReactElement, useState } from "react"
import { Box } from "./Box"
import { CheckWrapper, CommonItem } from "./Item"
import FormTool from "./FormTool"
import { boxPadding } from "./style"

interface SelectTemplateProps {
  showList?: ReactElement
  secList?: ReactElement
  search?: string
  /**
   * @desc 用来放formTool工具的
   */
  formTool?: ReactElement
}

const boxGap = 20
const boxHeight = 400

export default function SelectTemplate({
  showList,
  secList,
  formTool
}: SelectTemplateProps) {
  const [size] = useState(() => {
    return {
      boxGap,
      boxHeight
    }
  })

  return (
    <div
      style={{
        width: "100%",
        display: "flex",
        gap: size.boxGap,
        justifyContent: "space-between"
      }}
    >
      {/* 左侧选择容器 */}
      <Box text={secList ? "选择:" : undefined} height={size.boxHeight}>
        {formTool}
        <div
          style={{
            paddingLeft: boxPadding,
            paddingRight: boxPadding,
            height: 1,
            flexGrow: 1,
            overflow: "auto"
          }}
        >
          {showList}
        </div>
      </Box>
      {/* 右侧选中容器 */}
      {secList ? (
        <Box text="已选:" height={size.boxHeight}>
          {secList}
        </Box>
      ) : null}
    </div>
  )
}

SelectTemplate.CommonItem = CommonItem
SelectTemplate.CheckWrapper = CheckWrapper
SelectTemplate.FormTool = FormTool
